<!--
 * @Description: 
 * @Author: wgy
 * @CreateTime: 2022-12-19 14:49:03
 * @UpdateTime: 2022-12-19 14:54:25
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
      <!-- 定义一个容器 -->
      <div id="box"></div>

      <!-- 引入react核心库 -->
      <script type="text/javascript" src="../js/react.development.js"></script>
      <!-- 引入react-domm库 用于操作dom -->
      <script type="text/javascript" src="../js/react-dom.development.js"></script>
      <!-- 引入props库 用于操作props -->
      <script type="text/javascript" src="../js/prop-types.js"></script>
      <!-- 引入babel,用于将jsx转换为js -->
      <script type="text/javascript" src="../js/babel.min.js"></script>
  
      <script type="text/babel">
          /*
              高阶函数: 满足下面任意一个条件则称为高阶函数
                1,若a函数接收参数为一个函数
                2,若a函数返回值是一个函数
              函数柯里化:通过函数调用继续返回函数的方式,实现多次接收参数最后统一处理
          */
          class MyComponent extends React.Component {
  
              // 初始化state
              state = {
                  username: "",
                  password: ""
              }
  
              // 当事件操作对象是同一个的时候可以不使用ref
              login = (event) => {
                  // 阻止原生表单提交
                  event.preventDefault()
                  const { username, password } = this.state
                  alert(`你输入的账号是:${username},密码是:${password}`)
              }
  
              saveFormData = (dataType) => {
                  return (event)=>{
                    this.setState({[dataType]:event.target.value})
                  }
              }
  
              render() {
                  return (
                      <div>
                          <form onSubmit={this.login}>
                              <input type="text" onChange={this.saveFormData("username")} name="username" placeholder="请输入账号" /><br />
                              <input type="password" onChange={this.saveFormData("password")} name="password" placeholder="请输入密码" />
                              <button>点击</button><br />
                          </form>
                      </div>
                  )
              }
          }
  
          // 渲染元素
          ReactDOM.render(<MyComponent />, document.getElementById("box"))
  
      </script>
</body>
</html>